<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jazz-timeline.css">
        <title>Jazz Timeline </title>         
    </head>
    <body class="custom-bg-white">
        <div class="jazz-timeline-wrapper">
            <div class="jazz-timeline white-timeline ultimate-style">
            
                <div class="timeline-post light-grey-post">
                    <div class="timeline-icon icon-larger iconbg-turqoise icon-color-white">
                    	<div class="icon-placeholder"><i class="fa fa-map-marker"></i></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content">
                        <h2 class="content-title turqoise-title"> Location Maps </h2>
                        <div class="content-details">
                            <div class="mwrap">
                            	<div id="map-canvas" class="map"></div>
                            </div>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post --> 
                
                <div class="timeline-post light-grey-post"> 
                    <div class="timeline-icon icon-larger iconbg-red icon-color-white">
                    	<div class="icon-placeholder"><i class="fa fa-youtube-play"></i></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content">
                        <h2 class="content-title red-title"> 3D Video </h2>
                        <div class="content-details">
                            <div class="media-container">
                                <div class="media-box">
                                    <iframe width="420" height="315" src="http://www.youtube.com/embed/5bCyP8mp0-E?autoplay=0" 
                                    frameborder="0" allowfullscreen></iframe>
                                </div><!-- end .media-box section -->
                            </div><!-- end .media-container section -->                            
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->                            
            
                <div class="timeline-post light-grey-post">
                    <div class="timeline-icon icon-larger iconbg-purple icon-color-white">
                    	<div class="icon-placeholder"><i class="fa fa-music"></i></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content">
                        <h2 class="content-title purple-title"> Audio </h2>
                        <div class="content-details">
                            <div class="media-container">
                                <div class="audio-box">
                        			<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/113329378&amp;auto_play=false&amp;hide_related=false&amp;visual=false"></iframe>
                                </div><!-- end .media-box section -->
                            </div><!-- end .media-container section -->
					 
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->             
            
                <div class="timeline-post light-grey-post">
                    <div class="timeline-icon icon-larger iconbg-blue icon-color-white">
                    	<div class="icon-placeholder"><i class="fa fa-photo"></i></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content">
                        <h2 class="content-title blue-title"> Photography </h2>
                        <div class="content-details">
                        	<div class="media-container"><img src="../../apps/images/xx1.jpg"></div>
							<p>Parents Day is celebrated in July each year to recognize and promote parenting as a 
                            crucial part of families and the wider community.</p>                            
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post --> 
                
                <div class="timeline-post light-grey-post">
                    <div class="timeline-icon icon-larger iconbg-green icon-color-white">
                    	<div class="icon-placeholder"><i class="fa fa-file-text"></i></div>
                        <div class="timeline-bar"></div>
                    </div>
                    <div class="timeline-content">
                        <h2 class="content-title green-title"> Content </h2>
                        <div class="content-details">
                        	<p>Easter Sunday is an important day in the Christian church calendar because it 
                            celebrates Jesus Christ's resurrection. The Easter date depends on the ecclesiastical 
                            approximation of the March equinox. </p>
                        </div>
                    </div><!-- timeline content -->
                </div><!-- .timeline-post -->                 
                                                         
            </div><!-- .timeline -->
        </div><!-- .jazz-timeline-wrapper -->
		<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>  
        <script src="js/scripts.js"></script>            
    </body>
</html>
